<template>
  <div id="app">
    <el-card class="box-card">
      <div id="logo">
        <p>Tinymce富文本</p>
        <el-button
          type="primary"
          plain
          size="small"
          @click="getExportAsWorld"
        >
          导出为WORLD
        </el-button>
      </div>
      <vue-tinymce
        v-model="content"
        :setting="setting"
      />
    </el-card>
  </div>
</template>

<script>
import { asBlob } from 'html-docx-js-typescript'
// 如果你想保存为docx格式，你还需要import 'file-saver'
import { saveAs } from 'file-saver'
export default {
  name: 'app',
  data () {
    return {
      content: '',
      setting: {
        menubar: false,
        theme: 'silver', // 主题 必须引入
        skin_url: '/tinymce/skins/ui/oxide', // 主题路径
        font_formats: "微软雅黑='微软雅黑'; 宋体='宋体'; 黑体='黑体'; 仿宋='仿宋'; 楷体='楷体'; 隶书='隶书'; 幼圆='幼圆'; 方正舒体='方正舒体'; 方正姚体='方正姚体'; 等线='等线'; 华文彩云='华文彩云'; 华文仿宋='华文仿宋'; 华文行楷='华文行楷'; 华文楷体='华文楷体'; 华文隶书='华文隶书'; Andale Mono=andale mono,times; Arial=arial; Arial Black=arial black;avant garde; Book Antiqua=book antiqua;palatino; Comic Sans MS=comic sans ms; Courier New=courier new;courier; Georgia=georgia; Helvetica=helvetica; Impact=impact;chicago; Symbol=symbol; Tahoma=tahoma;arial; sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms; Verdana=verdana;geneva; Webdings=webdings; Wingdings=wingdings", // 工具栏自定义字体选项
        // eslint-disable-next-line no-multi-str
        toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
        styleselect  fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image  charmap hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
        toolbar_drawer: 'sliding',
        quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
        plugins: 'link image media table lists fullscreen quickbars',
        branding: false,
        language: 'zh_CN', // 本地化设置
        height: 'calc(100vh - 180px)',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px'
      }
    }
  },
  mounted () {
    this.getTinymce()
  },
  methods: {
    getTinymce () {
      this.content = ''
    },
    getExportAsWorld () {
      asBlob(this.content).then(data => {
        saveAs(data, '文件名.docx') // 保存为 docx 文件
      }) // asBlob() return Promise<Blob|Buffer>
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  height: calc(100vh - 80px);
}
#logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  p {
    font-size: 20px;
    font-weight: bold;
    border-left: 4px solid rgb(102, 113, 209);
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-right: 20px;
  }
}
</style>
